<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>NicePage demo</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link href="css/layui.css" type="text/css" rel="stylesheet">


</head>

<BODY>
	<center style="padding-top: 40px">
		<a style="font-size: 70px;font-weight: 500">JSON自动分页 <span class="layui-badge layui-bg-blue">DEMO</span></a>
		</br>
		<div style="width: 80%;padding-top: 20px">
			<blockquote class="layui-elem-quote">#基于强大的 layui 框架,通过扩展nicePage.js实现JSON数据格式的自动表格分页和跳转功能,配置简单,上手速度快，兼容IE5+。</blockquote>
			<!--以下为两个必须div元素-->
			<div id="table"></div>
			<div id="pageBar"></div>
		</div>

	</center>

	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>基本使用说明</legend>
	</fieldset>

	<pre class="layui-code">
			//标准json格式 目前只支持[{a:b,c:d},{a:b,c:d}]

			var json=[{"id":"1","name":"Tom","age":"12"},{"id":"2","name":"Joy","age":"13"}]

			//nameList与widthList的数组长度要一致
			nameList//数组为表格列名,如['序号','姓名','年龄']
			widthList//数组为列名的宽度,如['100','200','100']
			
			/**
			 * 初始化设置nicepage组件
			 *------------------------------------------------------------
			 * 进行数据组装,与layui交互进行元素渲染
			 *-------------------------------------------------------------
			 * @param    {string}  table     table的div id
			 * @param    {string}  bar     底部分页的div id
			 * @param    {int}  limit     每页默认行数
			 * @param    {string}  color     底部分页的颜色
			 * @param    {array}  layout     底部分页的布局,具体可参考layui api
			 *
			 * @date     2018-10-19
			 * @author   Thomas.dz <hzdz163@163.com>
			 */
			//初始化
			$(function () {
				nicePage.setCfg({
					table: 'table',
					bar: 'pageBar',
					limit: 20,
					color: '#1E9FFF',
					layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
				});
			});
			//初始化完成
		</pre>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script language="Javascript" src="js/layui.js"></script>
<script language="Javascript" src="js/nicePage.js"></script>
<script LANGUAGE="javascript">
	//标准json格式 目前只支持[{a:b,c:d},{a:b,c:d}]此种格式
	var json = [{
		"id": "1",
		"name": "Tom",
		"age": "12"
	}, {
		"id": "2",
		"name": "Joy",
		"age": "13"
	}, {
		"id": "3",
		"name": "Tom",
		"age": "12"
	}, {
		"id": "4",
		"name": "Joy",
		"age": "13"
	}, {
		"id": "5",
		"name": "Tom",
		"age": "12"
	}, {
		"id": "6",
		"name": "Joy",
		"age": "13"
	}, {
		"id": "7",
		"name": "Tom",
		"age": "12"
	}, {
		"id": "8",
		"name": "Joy",
		"age": "13"
	}, {
		"id": "9",
		"name": "Tom",
		"age": "12"
	}, {
		"id": "10",
		"name": "Joy",
		"age": "13"
	}, {
		"id": "11",
		"name": "Tom",
		"age": "12"
	}, {
		"id": "12",
		"name": "Joy",
		"age": "13"
	}, {
		"id": "13",
		"name": "Tom",
		"age": "12"
	}, {
		"id": "14",
		"name": "Joy",
		"age": "13"
	}, {
		"id": "15",
		"name": "Tom",
		"age": "12"
	}, {
		"id": "16",
		"name": "Joy",
		"age": "13"
	}, {
		"id": "17",
		"name": "Tom",
		"age": "12"
	}, {
		"id": "18",
		"name": "Joy",
		"age": "13"
	}, {
		"id": "19",
		"name": "Tom",
		"age": "12"
	}, {
		"id": "20",
		"name": "Joy",
		"age": "13"
	},{
		"id": "21",
		"name": "Joy",
		"age": "13"
	}];

	//nameList与widthList的数组长度要一致
	var nameList = ['序号', '姓名', '年龄'] //table的列名
	var widthList = [100, 100, 100] //table每列的宽度

	/**
	 * 初始化设置nicepage组件    v1.0
	 *-------------------------------------------------------------
	 * 进行数据组装,与layui交互进行元素渲染
	 *-------------------------------------------------------------
	 * @param    {string}  table     table的div id
	 * @param    {string}  bar     底部分页的div id
	 * @param    {int}  limit     每页默认行数
	 * @param    {string}  color     底部分页的颜色
	 * @param    {array}  layout     底部分页的布局,具体可参考layui api
	 *
	 * @date     2018-10-19
	 * @author   duzhen wechat：wenxuejn
	 */
	$(function () {
		nicePage.setCfg({
			table: 'table',
			bar: 'pageBar',
			limit: 20,
			color: '#1E9FFF',
			layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
		});
	}); //初始化完成
</script>

</html>